<template>
    <div>
        <div class="header">
            <div class="inputItem">
                <div class="title">全部状态</div>
                <div class="inputBox">
                    <!-- <el-select class="select" v-model="WaybillStatus" placeholder="请选择">
                        <el-option v-for="item in WaybillStatusArr" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> -->
                </div>
            </div>
            <div class="inputItem">
                <div class="title">运单编号</div>
                <div class="inputBox">
                    <el-input v-model="WaybillNumber" @keyup.enter.native="searchList">
                    </el-input>
                </div>
            </div>

            <!-- 查询 -->
            <div class="Btn_grounp">
                <el-button class="searchBtn" type="primary" size="small" icon="el-icon-search"
                    @click="initList()">查询</el-button>
                <el-button class="clearBtn" type="plain" size="small" icon="el-icon-refresh-right"
                    @click="CleanUp">清空</el-button>
                <button class="addRouteBtn">
                    <i class="el-icon-plus iconBtn"></i>
                    <span>添加线路</span>
                </button>
            </div>
        </div>
        <div class="main">
            <div class="list">
                <el-table :data="records" style="width: 100%">
                    <el-table-column align="center" label="序号">

                    </el-table-column>
                    <el-table-column align="center" prop="" label="线路名称">

                    </el-table-column>
                    <el-table-column align="center" prop="" label="发货地">
                        <template slot-scope="scope">
                            <div class="textBtn"></div>
                        </template>

                    </el-table-column>
                    <el-table-column align="center" prop="" label="目的地">
                        <template slot-scope="scope">
                            <div class="textBtn"></div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="" label="绑定司机">

                    </el-table-column>
                    <el-table-column align="center" prop="" label="联系电话">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="车辆信息">
                    </el-table-column>
                    <el-table-column align="center" prop="" label="创建时间">
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" size="small">绑定司机</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination class="pagination" background layout="slot,prev, pager, next" :total="data.total * 1"
                    :page-size="data.size * 1" :pager-count="5" @current-change="changePages($event)">
                    <template slot>
                        <span style="
                    color: #686868;
                    font-size: 12px;
                    margin-right: 20px;
                    display: inline-block;
                  ">共{{ data.total }}条,每页{{ data.size }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>
    </div>
</template>
  
<script>
import httpApi from "@/http";
export default {
    data() {
        return {
            WaybillNumber:"",

            records: [],
            SerialNumber: "",
            data: {},
            pageCurrent: "1",
            size: "5",



        };
    },
    methods: {
        changePages(val) {
            this.pageCurrent = val;
            //this.initList();
        },
        initList() {
            let params = {
                current: this.pageCurrent,
                size: this.size,
            };
            // httpApi.selfOperatedSettingsApi.getSelfSupportOwnerList(params).then((res) => {
            //     ////console.log(res);
            //     this.data = res.data.data;
            //     this.records = res.data.data.records;
            //     ////console.log("付款单总数据", this.data);
            //     ////console.log("列表数据", this.records);
            //     this.records.forEach((item, i) => {
            //         let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
            //         item.SerialNumber = num < 10 ? "0" + num : num;
            //     });
            // });
        },



        CleanUp() {


        },
    },
    mounted() {
        //this.initList();
    },
};
</script>
  
<style lang="scss" scoped>
.header {
    height: 76px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 29px;
    margin-bottom: 8px;

    .Btn_grounp {
        display: flex;
        margin-left: auto;

        .searchBtn {
            width: 80px;
            height: 32px;
            color: #fff;
            font-size: 12px;
        }

        .clearBtn {
            width: 80px;
            height: 32px;
            color: #262626;
            font-size: 12px;
            margin-right: 42px;
        }

        .addRouteBtn {
            background-color: #1890ff;
            border-radius: 4px;
            height: 32px;
            width: 105px;
            color: #ffffff;
            font-size: 12px;
            padding: 8px 17px 9px 17px;
            transition: 0.2s;
            cursor: pointer;
      
            .iconBtn {
                margin-right: 7px;
                font-size: 15px;
            }

            &:hover {
                opacity: 0.8;
            }
        }


    }

    .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            .select {
                ::v-deep .el-input__icon {
                    line-height: 0;
                }
            }

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 275px);
    background-color: #fff;
    padding: 0px;

    .list {
        height: calc(100% - 102px);
        width: 100%;

        .tag {
            width: 63px;
            height: 28px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            background-color: #ecf5fe;
            color: #1890ff;

            .dian {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
                color: #1890ff;
            }
        }

        ::v-deep .el-table__body-wrapper {
            max-height: calc(100vh - 335px) !important;
            overflow-y: scroll;
        }

        // 表头样式
        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .stateBtns {
            height: 30px;
            width: 76px;

            ::v-deep .el-button {
                height: 30px;
                width: 76px;
                font-size: 12px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 30px;
            }

            .waitPass {
                background-color: #ecf5fe;
                color: #1890ff;
            }

            .noPass {
                background-color: #fde8e9;
                color: #f7555d;
            }
        }
    }

    .paginationBox {
        margin-top: 13px;
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 88px;

        align-items: center;

        .pagination {
            height: 48px;
            margin-left: auto;
            margin-bottom: 40px;
        }
    }
}


.textBtn {
    color: #1890FF;
    font-size: 12px;
    transition: 0.2s;
    cursor: pointer;

    &:hover {
        opacity: 0.8;
    }
}
</style>
    